<template>
  <div class="main-context">
    电影地区
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getMovieAreaList, movieAreaAdd, movieAreaRemove } from '@/api/movie'
import { ElMessage } from 'element-plus'
import { usePageOption } from '../../hook'
const { pagination } = usePageOption()

// 获取列表数据
const loading = ref(false)
const data = ref([])
loading.value = true
getList()
function getList () {
  getMovieAreaList().then(res => {
    pagination.total = res.total
    data.value = res.data
    loading.value = false
  })
}
// 表格头部和单元格配置
const columns = ref([
  { colKey: 'id', title: '编号', minWidth: 200, width: 260 },
  { colKey: 'name', title: '地区', width: '200' },
  { colKey: 'count', title: '影片数量', width: '200' },
  { colKey: 'createTime', title: '创建时间', width: 180 },
  { colKey: 'operation', title: 'title-slot-name', width: 130 }
])
// 删除
function remove (id) {
  movieAreaRemove({ id }).then(res => {
    getList()
    ElMessage.success({
      content: '删除成功',
      duration: 2000
    })
  }).catch(err => {
    ElMessage.error(err.msg)
  })
}

const visible = ref(false)
const formData = reactive({
  name: ''
})
const rules = {
  name: [{ required: true }]
}
const form = ref(null)
function add (e) {
  form.value.submit()
}
function submit ({ validateResult }) {
  if (validateResult === true) {
    movieAreaAdd(formData).then(res => {
      getList()
      ElMessage.success(res.msg)
    }).catch(err => {
      ElMessage.error(err.msg)
    })
  }
}
</script>
<style scoped>
</style>
